1import { Button, GlassEffectContainer, HStack, NamespaceReader, Navigation, Script, VStack, useObservable } from "scripting"
2
3function View() {
4
5 const isAlternativeMenu = useObservable(false)
6
7 return <NamespaceReader>{namespace => <VStack
8 spacing={50}
9 frame={{
10 maxWidth: 'infinity',
11 maxHeight: 'infinity'
12 }}
13 background="systemYellow"
14 >
15 <GlassEffectContainer
16 >
17 <HStack
18 spacing={0}
19 font="largeTitle"
20 imageScale="large"
21 buttonStyle="glass"
22 labelStyle="iconOnly"
23 >
24 {
25 isAlternativeMenu.value
26 ? <>
27 <Button
28 title="Home"
29 systemImage="house"
30 action={() => { }}
31 glassEffectID={{
32 id: 1,
33 namespace
34 }}
35 glassEffectUnion={{
36 id: 1,
37 namespace
38 }}
39 />
40 <Button
41 title="Settings"
42 systemImage="gear"
43 action={() => { }}
44 glassEffectID={{
45 id: 2,
46 namespace
47 }}
48 glassEffectUnion={{
49 id: 1,
50 namespace
51 }}
52 />
53 </>
54
55 : <>
56 <Button
57 title="Edit"
58 systemImage="pencil"
59 action={() => { }}
60 glassEffectID={{
61 id: 1,
62 namespace
63 }}
64 glassEffectUnion={{
65 id: 1,
66 namespace
67 }}
68 />
69 <Button
70 title="Erase"
71 systemImage="eraser"
72 action={() => { }}
73 glassEffectID={{
74 id: 3,
75 namespace
76 }}
77 glassEffectUnion={{
78 id: 1,
79 namespace
80 }}
81 glassEffectTransition="materialize"
82 />
83 <Button
84 title="Delete"
85 systemImage="trash"
86 action={() => { }}
87 glassEffectID={{
88 id: 2,
89 namespace
90 }}
91 glassEffectUnion={{
92 id: 1,
93 namespace
94 }}
95 />
96 </>
97 }
98 </HStack>
99 </GlassEffectContainer>
100
101 <Button
102 title="Toggle"
103 buttonStyle="bordered"
104 action={() => {
105 withAnimation(() => {
106 isAlternativeMenu.setValue(
107 !isAlternativeMenu.value
108 )
109 })
110 }}
111 />
112 </VStack>
113 }</NamespaceReader>
114}
115
116async function run() {
117 await Navigation.present(<View />)
118
119 Script.exit()
120}
121
122run()
